<template>
    <div ref="table">
        <a-table :columns="columns" :data-source="tableData" :pagination="false" size="small" rowKey="id"
            :loading="loading" :scroll="{ y: 610 }">
            <template slot="index" slot-scope="text, record,index">
                {{ index + 1 }}
            </template>
            <template slot="option" slot-scope="text, record">
                <a-space>
                    <a-button type="link" icon="edit" @click="edit(record)">修改</a-button>
                    <a-button type="link" icon="eye" @click="edit(record, 'look')">查看</a-button>
                    <a-popconfirm title="这是一段内容确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="onConfirm(record.id)">
                        <a-button type="link" style="color: red" icon="delete">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="page-size"
                :current-page="currentPage4" :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            width: null,
            columns: [
                { title: '序号', key: 'index', scopedSlots: { customRender: 'index' }, align: 'center', width: 150 },
                { title: '名称', key: 'name', dataIndex: 'name', align: 'center', width: 150 },
                { title: '长度', key: 'length', dataIndex: 'length', align: 'center', width: 150 },
                { title: '类型', key: 'type', dataIndex: 'type', align: 'center', width: 150 },
                { title: '设备名称', key: 'hostName', dataIndex: 'hostName', align: 'center', width: 150 },
                { title: '级联选择', key: 'select', dataIndex: 'select', align: 'center', width: 150 },
                { title: '时间', key: 'times', dataIndex: 'times', align: 'center', width: 150 },
                { title: '时间区间', key: 'time', dataIndex: 'time', align: 'center', width: 250 },
                {
                    title: '操作', key: 'option', scopedSlots: { customRender: 'option' }, align: 'center', fixed: 'right'
                },
            ],
            currentPage4: 1,
        };
    },
    props: ['tableData', 'loading', 'pagination'],
    mounted() {
        this.width = this.$refs.table.offsetWidth - 20;
        console.log(this.width)
    },
    methods: {
        onConfirm(id) {
            this.$emit('onEvent', id)
        },
        edit(record, type) {
            this.$emit('onEvent', record, type)
        },
        handleSizeChange(val) {
            this.pagination.pageSize = val;
            this.$emit('change', this.pagination)
        },
        handleCurrentChange(val) {
            this.pagination.pageNum = val;
            this.$emit('change', this.pagination)
        },
        oncancel() {
            this.$message.info('Click on Cancel');
        }
    },
}

</script>

<style lang="less" scoped>
.pagination {
    margin-top: 10px;
    float: right;
}
</style>